<template>
  <div>
    <div style="margin-top: 15px; width:500px;margin-left:50px">
      <el-input v-model="searchStr" placeholder="请输入内容" class="input-with-select">
        <el-select slot="prepend" v-model="selectType" placeholder="请选择" style="width:100px">
          <el-option label="全部" value="1" />
          <el-option label="用户名" value="2" />
          <el-option label="手机号" value="3" />
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="doSearch" />
      </el-input>
    </div>
    <el-table
      :data="showUserList"
      class="user-table"
    >
      <el-table-column
        prop="id"
        label="id"
        sortable
        align="center"
      />
      <el-table-column
        prop="username"
        label="用户"
        align="center"
      />
      <el-table-column
        prop="phone"
        label="手机"
        sortable
        align="center"
      >
        <template slot-scope="scope">
          <div>
            <span v-if="scope.row.phone">{{ scope.row.phone }}</span>
            <span v-else>暂无</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
      >
        <template slot-scope="scope">
          <el-button type="primary" @click="toUserOrderList(scope.$index,scope.row)">订单详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>
<script>
import * as admin from '@/api/user'
export default {
  data() {
    return {
      showUserList: [],
      userList: [],
      searchStr: '',
      selectType: '1'
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    getUserList() {
      admin.getUserList().then(res => {
        this.userList = res.object
        this.showUserList = res.object
      })
    },
    toUserOrderList(index, obj) {
      this.$router.push(`/order/userList/${obj.id}`)
    },
    doSearch() {
      // console.log('执行了')
      let arr = []
      if (this.selectType === '1') {
        arr = this.userList
      } else if (this.selectType === '2') {
        arr = this.userList.filter(element => {
          return element.username.includes(this.searchStr)
        })
      } else if (this.selectType === '3') {
        arr = this.userList.filter(element => {
          if (!element.phone) {
            return false
          } else {
            return element.phone.includes(this.searchStr)
          }
        })
      }
      this.showUserList = arr
    }
  }
}
</script>
<style lang="scss" scoped>
.user-table{
  margin-top: 10px;
  text-align: center !important;
}
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
